<template>
  <div class="detail" v-if="result.title">
    <van-nav-bar title="商品详情" fixed placeholder left-arrow  @click-left="onClickLeft"/>
    
    <div class="imgBox">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white" @change="onChange">
        <van-swipe-item v-for="item in result.imgArr" :key="item">
           <img :src="item" alt="">
        </van-swipe-item>
      </van-swipe>
      <span>{{index}} <i>/{{result.imgArr.length}}</i></span>
    </div>

    <div class="shopDes">
      <p>￥<em>{{result.currentPrice.toFixed(2)}}</em> <i>会员专享</i></p>
      <span>普通价￥<em>{{result.originalPrice.toFixed(2)}}</em></span>
      <h2>{{result.productName}}</h2>
      <i>{{result.describe}}</i>
    </div>

    <div class="shopRule">
      <van-cell is-link @click="showPopup">{{choseShop.shop?'选择的商品：'+choseShop.shop+' 数量：'+choseShop.nums:"选择 可选规则"}}</van-cell>
      <van-popup v-model="show" closeable position="bottom" :style="{ height: '60%' }">
        <div class="shopImg">
          <img :src="result.imgUrl" alt="">
          <div class="title">
            <p>￥<em>{{result.currentPrice.toFixed(2)}}</em> <i>会员专享</i></p>
            <span>普通价￥<em>{{result.originalPrice.toFixed(2)}}</em></span>
          </div>
        </div>
        <!-- 尺码 -->
        <div class="size">
            <p>{{result.standards.title}}</p>
            <span v-for="(item,index) in result.standards.standards" :key="item" @click="sizeChose(index,item)" :class="{active:index===sizeIndex}">
              {{item}}
            </span>
        </div>
        <!-- 数量 -->
          <van-field name="stepper" label="购买数量">
            <template #input>
              <van-stepper v-model="stepper" />
            </template>
          </van-field>

          <!--  -->
          <div class="btn">
             <van-button type="primary" block @click="conShop" v-model="show">确定</van-button>
          </div>
         
      </van-popup>
    </div>

    <van-cell title="商品评论(0)" is-link value="好评" />

    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" />
      <van-goods-action-icon icon="cart-o" text="购物车" @click="goCart"/>
      <van-goods-action-button type="warning" text="加入购物车" @click="addCart" />
      <van-goods-action-button type="danger" text="立即购买" />
    </van-goods-action>
     
  </div>
</template>

<script>
import { getDetailApi, addCartApi } from "@/utils/api";
import { Dialog } from "vant";
export default {
  props: ["id"],
  data() {
    return {
      index: 1, //轮播图
      result: {},
      show: false,
      stepper: 1,
      sizeIndex: "",
      sizeShop: "",
      choseShop: {}
    };
  },

  computed: {},

  mounted() {},
  created() {
    this.getDate();
  },

  methods: {
    getDate() {
      getDetailApi({ productId: this.id }).then(res => {
        if (res.status === "0") {
          this.result = res.result;
          console.log(res.result);
        }
      });
    },
    onClickLeft() {
      this.$router.go(-1);
    },
    showPopup() {
      this.show = true;
    },
    onChange(index) {
      this.index = index + 1;
    },
    sizeChose(index, item) {
      this.sizeShop = item;
      this.sizeIndex = index;
    },
    conShop() {
      this.show = false;
      this.choseShop = { shop: this.sizeShop, nums: this.stepper };
      console.log({ 选择的商品为: this.sizeShop, 数量为: this.stepper });
    },
    async addCart() {
      console.log(
        localStorage.getItem("token"),
        this.id,
        this.stepper,
        this.sizeShop
      );
      if (localStorage.getItem("token")) {
        if (this.sizeShop && this.stepper) {
          let res = await addCartApi({
            token: localStorage.getItem("token"),
            productId: this.id,
            count: this.stepper,
            standard: this.sizeShop
          });
          console.log(res);
        } else {
          Dialog.alert({
            title: "请选择商品"
          }).then(() => {});
        }
      } else {
        Dialog.confirm({
          title: "请先登录"
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            // on cancel
          });
      }
    },
    goCart() {
      if (localStorage.getItem("token")) {
        this.$router.push("/home/cart");
      } else {
        Dialog.confirm({
          title: "请先登录"
        })
          .then(() => {
            this.$router.push("/login");
          })
          .catch(() => {
            // on cancel
          });
      }
    }
  }
};
</script>

<style lang="less" scoped>
.detail {
  .imgBox {
    .my-swipe .van-swipe-item {
      color: #fff;
      font-size: 20px;
      line-height: 150px;
      text-align: center;
    }
    width: 100%;
    height: 250px;
    position: relative;
    background-color: #fff;
    span {
      width: 50px;
      height: 20px;
      line-height: 20px;
      text-align: center;
      border-radius: 10px;
      position: absolute;
      font-size: 16px;
      right: 10px;
      bottom: 10px;
      background-color: rgba(0, 0, 0, 0.3);
      i {
        font-size: 14px;
      }
    }
  }
  .shopDes {
    font-size: 18px;
    padding: 10px;
    background-color: #fff;
    > p {
      color: rgb(245, 196, 91);
      padding-bottom: 15px;
      em {
        font-size: 30px;
      }
      i {
        display: inline-block;
        font-size: 14px;
        background-color: rgba(241, 155, 98, 0.2);
        width: 70px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        border-radius: 10px;
      }
    }
    > span {
      color: #999;
      font-size: 16px;
    }
    h2 {
      margin: 10px 0;
      font-size: 22px;
    }
    > i {
      display: block;
      color: #999;
      font-size: 16px;
      width: 350px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  }
  .shopRule {
    margin: 10px 0;
    .shopImg {
      margin: 10px;
      padding-bottom: 20px;
      display: flex;
      border-bottom: #999 0.5px solid;
      img {
        display: block;
        width: 100px;
        height: 100px;
      }
      .title {
        margin-left: 20px;
        > p {
          color: rgb(245, 196, 91);
          padding: 5px 0;
          em {
            font-size: 20px;
          }
          i {
            display: inline-block;
            font-size: 12px;
            background-color: rgba(241, 155, 98, 0.2);
            width: 70px;
            height: 20px;
            text-align: center;
            line-height: 20px;
            border-radius: 10px;
          }
        }
        > span {
          color: #999;
          font-size: 16px;
        }
      }
    }
    .size {
      margin: 10px;
      padding-bottom: 20px;
      border-bottom: #999 0.5px solid;
      p {
        margin: 10px 0;
        font-size: 16px;
        font-weight: 800;
      }
      span {
        overflow: hidden;
        display: inline-block;
        padding: 5px;
        margin-right: 10px;
        font-size: 14px;
        border: 1px #999 solid;
        border-radius: 30%;
      }
      .active {
        background-color: #f40;
      }
    }
    .btn {
      position: fixed;
      bottom: 0;
      width: 100%;
      font-size: 20px;
    }
  }
}
</style>
